<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<h1 align="center">图书信息中心</h1>
<!--表单-->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图书分类</label>
            <div class="layui-input-inline" style="width: 350px">
                <select id="categoryId" name="categoryId" lay-filter="categoryId"  >
                    <option value="">--请选择--</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="*">查询</button>
            </div>
        </div>
    </div>
</div>

<!--表格-->
<table id="demo" lay-filter="test"></table>

<!--头工具-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
    </div>
</script>
<!--//行工具-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-submit lay-filter="dalete">删除</a>
</script>


<!-- 你的HTML代码 -->
<script src="/layui/layui.js"></script>


<script>
    //一般直接写在一个js文件中
    layui.use(['form','layer', 'table'], function(){
        var layer = layui.layer;
        var table = layui.table;
        var $=layui.$;
        var form=layui.form;

        //第一个实例,渲染table
        var tableIns= table.render({
            elem: '#demo'//映射table
            ,toolbar: '#toolbarDemo'//后面添加行工具
            ,height: 'full-20'//全屏
            ,url: 'http://localhost:8080/entry/list' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '图书编号',  sort: true, fixed: 'left'}//固定长度    sort: true排序
                ,{field: 'title', title: '图书名称',}
                ,{field: 'summary', title: '图书摘要'}
                ,{field: 'uploaduser', title: '上传人', }
                ,{field: 'createdate', title: '上传时间',templet:function (d) {//时间
                    var d=new Date(d.createdate);
                    var date = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() +'日';
                    return date;

                    }}
                ,{field: '', title: '操作',  toolbar: '#barDemo'}//排序 toolbar: '#barDemo'行工具
            ]]
        });
        // layer.msg('Hello World');
        //监听行工具事件，用户获取对应表格的内容
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    $.ajax({
                        url:"http://localhost:8080/entry/deletebook",
                        data:{
                            id:data.id
                        },
                        type:"POST",
                        dataType:"JSON",
                        success:function (result) {
                            // alert(result.code)
                            //判断
                            if (result.code==0){
                                //添加成功
                                setTimeout(function(){
                                    // 关闭当前弹出层
                                    //当你在iframe页面关闭自身时
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                },1000)

                                layer.alert("删除成功")

                            }else {
                                //添加失败
                                layer.alert(result.msg);
                            }
                        },
                        error:function (result) {
                            layer.alert("服务器爆炸")
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
                // console.log("index:"+data)
                //把数据存入到本地磁盘，然后在弹出层获取
                //将五个值传输到修改界面
                layui.data('test',{key:"id",value:data.id})
                layui.data('test',{key:"title",value:data.title})
                layui.data('test',{key:"categoryId",value:data.categoryId})
                layui.data('test',{key:"summary",value:data.summary})
                layui.data('test',{key:"uploaduser",value:data.uploaduser})
                layui.data('test',{key:"createdate",value:data.createdate})


                //1弹出一个弹出层
                layer.open({   //弹窗层
                    type: 2    //2是跳到页面
                    ,area:["500px","662px"]
                    ,title: '修改电子图书信息',//弹出层的封顶标题
                    content: 'http://localhost:8080/xiugai.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });
       //监听头工具
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    // layer.msg('添加');
                    layer.open({   //弹窗层
                        type: 2
                        ,area:["500px","662px"]
                        ,title: '添加图书',//弹出层的封顶标题
                        content: 'http://localhost:8080/tianjia.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
            };
        });

        // //获取表单数据
        // $.ajax({
        //     url:"http://localhost:8080/ebookcategory/findall",//请求路径
        //     data:null,//发送数据
        //     type:"GET",//请求方式
        //     dataType:"JSON",
        //     success:function (result) {
        //         // layer.alert(result.code)
        //         //判断
        //         if (result.code==0){
        //             //成功获取数据
        //             var content=" <option value=''>--请选择--</option>";
        //             var jsonArray=result.data;
        //             for (var i=0;i<jsonArray.length;i++){
        //                 content+="<option value='"+jsonArray[i].id+"'>"+jsonArray[i].name+"</option>"
        //             }
        //             //打印以下
        //             console.log(content)
        //             //将封装好的option插入到select中
        //             $("#categoryId").html(content);
        //             //重新渲染当前容器中全部的select
        //             form.render('select');
        //         }else {
        //             //添加失败
        //             layer.alert("获取失败");
        //         }
        //     },
        //     error:function () {
        //         layer.alert("服务器爆炸")
        //     }
        // });
        // 查询按钮提交事件并且更新table
        form.on('submit(*)', function(data){
           //让table重新加载，并且携带上表单的参数作为查询条件
            //获取表单数据
            var formData=data.field;
            //让table重新加载并携带数据
            tableIns.reload({
                where:formData
                }
            )
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>